<link href="/classico/public/assets/front-end/css/index/detail.css"
      rel="stylesheet" type="text/css"/>
<script type="text/javascript"
        src="/classico/public/assets/front-end/js/jquery.pajinate.min.js"></script>
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIqgbRzPinsk6Cz3j4dflntZF09sqz2QI&sensor=true">
</script>
<script type="text/javascript" src="/classico/public/assets/trivial/google-map/google-map.js">
</script>
<div id="product-detail">
    <?php
    /** @var ProductPOJO $productPOJO */
    $productPOJO = $this->productPOJO;
    ?>
    <div id="product-title">
        <div id="product-name">
            <?= $productPOJO->Name ?>
        </div>
        <div id="add-to-cart">
            <form action="<?= '/classico/public/shopping-cart/add-product' ?>" method="post">
                <input type="hidden" name="productID" value="<?= $productPOJO->ID ?>"/>
                <input type="submit" value="BUY"/>
            </form>
        </div>
    </div>
    <div id="product-expired">
        <?= $productPOJO->Expired ?>
    </div>
    <div id="product-main-info">
        <img id="product-image" src="<?= $productPOJO->ImageURL ?>"/>

        <div id="product-figure">
            <div>Old Price: <?= $productPOJO->OldPrice ?></div>
            <div>New Price: <?= $productPOJO->NewPrice ?></div>
            <div>
                Bought Amount: <?= $productPOJO->OrginalAmount - $productPOJO->ExistingAmout ?>
            </div>
        </div>
    </div>
    <div id="product-description">
        <?= $productPOJO->Description ?>
    </div>
    <div id="google-map">
    </div>
    <div id="google-map-tools">
        <div class="user-search-n-filter">
            <div class="user-search">
                <label><input type="text"/></label>
                <input type="button" value=""/>
            </div>
            <div class="user-hyperlink-btn">
                <a id="refresh-google-map">
                    Refresh
                </a>
            </div>
            <div class="user-hyperlink-btn">
                <a id="move-to-begin-google-map">
                    Move To Begin
                </a>
            </div>
            <div class="user-hyperlink-btn">
                <a id="move-to-flag-google-map">
                    Move To Flag
                </a>
            </div>
            <div class="user-filter">
                <label>
                    <select>
                        <option>-- Location --</option>
                    </select>
                </label>
            </div>
        </div>
    </div>
    <div id="product-comment-box">
        <label>
            <textarea id="comment-content" spellcheck="false"></textarea>
            <input id="btn-send-comment" type="button" value="SEND COMMENT"/>
        </label>
    </div>
    <div id="product-comments">
        <div class="page_navigation"></div>
        <h3>
            <?php
            /** @var CommentPOJO[] $commentPOJOs */
            $commentPOJOs = $this->commentPOJOs;
            $numberOfCommentPOJOs = count($commentPOJOs);
            $output = $numberOfCommentPOJOs > 0
                ? "Have $numberOfCommentPOJOs Comments"
                : 'No Comment';
            echo $output;
            ?>
        </h3>
        <ul class="content">
            <?php
            foreach ($commentPOJOs as $comment) :
                ?>
                <li>
                    <div class="comment-author"><?= $comment->Author ?></div>
                    <div class="comment-created-date"><?= $comment->CreatedDate ?></div>
                    <div class="comment-content"><?= $comment->Content ?></div>
                </li>
            <?php
            endforeach
            ?>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var lat = <?= $productPOJO->Lat ?>;
    var lng = <?= $productPOJO->Lng ?>;
    var googleMap = new GoogleMap('google-map', lat, lng);
    if (lat && lng) {
        googleMap.setFlag(lat, lng);
    }

    // BEGIN: geocode
    function geocode() {
        var keyWords = $('.user-search input[type = "text"]').val();
        googleMap.searchAddress(
            keyWords,
            function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var firstLocation = results[0].geometry.location;
                    var firstLat = firstLocation.lat();
                    var firstLng = firstLocation.lng();
                    googleMap.setCenter(firstLat, firstLng);

                    var html = "";
                    for (var i = 0; i < results.length; i++) {
                        var location = results[i].geometry.location;
                        var lat = location.lat();
                        var lng = location.lng();
                        var value = lat + '#' + lng;
                        var addressComponents = results[i].address_components;

                        html += '<option value="' + value + '">'
                            + addressComponents[0].short_name
                            + ' (' + addressComponents[1].short_name + ')'
                            + '</option>';
                    }

                    $('.user-filter select').html('').html(html);
                }
            }
        );

        $('.user-search input[type = "text"]').val('');
    }

    $('.user-search input[type = "text"]').keydown(function (event) {
        if (event.which == 13) {
            geocode();
        }
    });

    $('.user-search input[type = "button"]').click(function () {
        geocode();
    });
    // END: geocode

    // BEGIN: hyperlink
    $('.user-hyperlink-btn #refresh-google-map').click(function () {
        googleMap = new GoogleMap('google-map', lat, lng);

        if (lat && lng) {
            googleMap.setFlag(lat, lng);
        }

        googleMap.addRightClickListener(function (event) {
            var lat = event.latLng.lat();
            var lng = event.latLng.lng();
            googleMap.setBegin(lat, lng);
        });

        $('.user-search input[type = "text"]').val('');
        $('.user-filter select').html('<option>-- Location --</option>');

        return false;
    });

    $('.user-hyperlink-btn #move-to-begin-google-map').click(function () {
        googleMap.moveToBegin();
        return false;
    });

    $('.user-hyperlink-btn #move-to-flag-google-map').click(function () {
        googleMap.moveToFlag();
        return false;
    });
    // END: hyperlink

    $('.user-filter select').change(function () {
        var value = $('.user-filter select').val();
        var array = value.split('#');
        var lat = array[0];
        var lng = array[1];
        googleMap.setCenter(lat, lng);
    });

    googleMap.addRightClickListener(function (event) {
        var lat = event.latLng.lat();
        var lng = event.latLng.lng();
        googleMap.setBegin(lat, lng);
    });
</script>
<script type="text/javascript">
    $('#btn-send-comment').click(function () {
        var content = $('#comment-content').val().trim();
        var productID = parseInt('<?= $productPOJO->ID ?>');
        if (content && productID) {
            $.ajax({
                url: '/classico/public/index/send-comment/format/json',
                data: {content: content, productID: productID},
                type: 'post',
                success: function (data) {
                    $('#btn-send-comment').attr('value', data['message']);
                    $('#comment-content').attr('disabled', 'disabled').attr('value', '');
                    $('#btn-send-comment').attr('disabled', 'disabled');
                    setTimeout(function () {
                        $('#comment-content').removeAttr('disabled');
                        $('#btn-send-comment').removeAttr('disabled');
                        $('#btn-send-comment').attr('value', 'SEND COMMENT');
                    }, 2000);
                }
            });
        }
    });
</script>
<?php
if (count($commentPOJOs) > 0) :
    ?>
    <script type="text/javascript">
        $('#product-comments').pajinate({
            start_page: 0,
            items_per_page: 5
        });

        $('#product-comments a').attr('href', 'http://page');
    </script>
<?php
endif
?>
